<template>
	<view>
		<view class="index">
			<!-- <image class="top-image" src="https://service-test.huaxinjiafu.com/static/miniprogram/images/reservation/yuyue-bg.jpg" mode="widthFix"></image> -->
			<view class="conner-page">
				<view class="title">{{timeData[currentDate] && timeData[currentDate].translate_date}}</view>
				<scroll-view scroll-x >
					<view class="date-wrapper">
						<view class="item" v-for="(item,index) in timeData" :key="index" @click="chooseDate(item,index)" :class="{active:currentDate==index}">
							<view class="eng">{{item.week}}</view>
							<view class="num">{{item.daynum}}</view>
						</view>
					</view>
				</scroll-view>
				<view class="title2">预约时间</view>
				<view class="appointment-wrapper">
					<button v-for="(items,idx) in currentTimes" :key="idx" :disabled="items.is_use==1?false:true" :class="{active2:currentTime==idx}" @click="chooseTime(items,idx)">{{items.time}}</button>
				</view>
				<view class="button-wrapper">
					<button @click="onSubmit">确定</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				currentDate: 0,
				timeData: [],
				currentTime: null,
				currentTimes: [],
				formData: {}
			}
		},
		onLoad() {
			this.timeData = [{"day":"2025-02-18","translate_date":"2025年02月","daynum":"18","week":"二","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-19","translate_date":"2025年02月","daynum":"19","week":"三","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-20","translate_date":"2025年02月","daynum":"20","week":"四","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-21","translate_date":"2025年02月","daynum":"21","week":"五","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-22","translate_date":"2025年02月","daynum":"22","week":"六","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-23","translate_date":"2025年02月","daynum":"23","week":"日","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":0,"time_slot":2,"time":"14：00-16：00"},{"is_use":0,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-24","translate_date":"2025年02月","daynum":"24","week":"一","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-25","translate_date":"2025年02月","daynum":"25","week":"二","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-26","translate_date":"2025年02月","daynum":"26","week":"三","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-27","translate_date":"2025年02月","daynum":"27","week":"四","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-02-28","translate_date":"2025年02月","daynum":"28","week":"五","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-01","translate_date":"2025年03月","daynum":"01","week":"六","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-02","translate_date":"2025年03月","daynum":"02","week":"日","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":0,"time_slot":2,"time":"14：00-16：00"},{"is_use":0,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-03","translate_date":"2025年03月","daynum":"03","week":"一","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-04","translate_date":"2025年03月","daynum":"04","week":"二","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-05","translate_date":"2025年03月","daynum":"05","week":"三","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-06","translate_date":"2025年03月","daynum":"06","week":"四","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-07","translate_date":"2025年03月","daynum":"07","week":"五","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-08","translate_date":"2025年03月","daynum":"08","week":"六","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-09","translate_date":"2025年03月","daynum":"09","week":"日","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":0,"time_slot":2,"time":"14：00-16：00"},{"is_use":0,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-10","translate_date":"2025年03月","daynum":"10","week":"一","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-11","translate_date":"2025年03月","daynum":"11","week":"二","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-12","translate_date":"2025年03月","daynum":"12","week":"三","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-13","translate_date":"2025年03月","daynum":"13","week":"四","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-14","translate_date":"2025年03月","daynum":"14","week":"五","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-15","translate_date":"2025年03月","daynum":"15","week":"六","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-16","translate_date":"2025年03月","daynum":"16","week":"日","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":0,"time_slot":2,"time":"14：00-16：00"},{"is_use":0,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-17","translate_date":"2025年03月","daynum":"17","week":"一","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-18","translate_date":"2025年03月","daynum":"18","week":"二","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]},{"day":"2025-03-19","translate_date":"2025年03月","daynum":"19","week":"三","times":[{"is_use":0,"time_slot":1,"time":"09：00-11：00"},{"is_use":1,"time_slot":2,"time":"14：00-16：00"},{"is_use":1,"time_slot":3,"time":"16：00-18：00"}]}]
			this.currentTimes = this.timeData[this.currentDate].times
			console.log(this.currentTimes)
		},
		methods:{
			chooseDate (date,index) {
				this.currentDate = index
				this.currentTimes = date.times
				this.formData.consultant_time = date.day
			},
			chooseTime (time,idx) {
				this.currentTime = idx
				this.formData.time_slot = time.time_slot
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index{
		background: $UNI-backgroundColor;
	}
	.top-image{
		width: 100%;
		height: 630rpx;
	}
	.conner-page{
		margin-top: 30rpx;
		box-sizing: border-box;
		width: 100%;
		padding: 100rpx 60rpx;
		background:#fff;
		color: #191B46;
		border-radius: 100rpx 100rpx 0px 0px;
		
		.title{
			margin-bottom: 75rpx;
			font-size: 48rpx;
		}
		.title2{
			margin-top: 100rpx;
			margin-bottom: 50rpx;
			font-size: 40rpx;
		}
		.appointment-wrapper{
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			& button{
				width: 300rpx;
				line-height: 100rpx;
				margin: 0 30rpx 35rpx 0;
				background: #F4F4F8;
				font-size: 30rpx;
				border-radius: 10rpx;
				&:nth-child(2n){
					margin-right: 0;
				}
			}
		}
	}
	.date-wrapper{
		white-space: nowrap;
		.item{
			display: inline-block;
			width:calc(100% / 7);
			padding:32rpx 0;
			text-align: center;
			border-radius: 40rpx;
			.eng{
				margin-bottom: 50rpx;
				font-size: 32rpx;
				color:#9B9FAB;
			}
			.num{
				font-size: 36rpx;
				color:#191B46;
			}
		}
	}
	.button-wrapper{
		margin-top: 70rpx;
		& button{
			width: 100%;
			line-height: 100rpx;
			background: linear-gradient(-90deg, #EB3822, #F86B51);
			color:#fff;
		}
	}
	.active{
		background:#49C49D;
		color:#fff;
	}
	.active .eng,.active .num{
		color:#fff !important;
	}
	.active2{
		border:1px solid #49C49D;
	}
</style>